<template>
  <el-form ref="form" v-if="customerForm" :rules="customerFormRules" :model="customerForm" label-width="80px">
    <el-form-item label="联系人" label-width="100px" prop="name">
      <el-input v-model="customerForm.name"></el-input>
    </el-form-item>
    <el-form-item label="联系人邮箱" label-width="100px" prop="email">
      <el-input v-model="customerForm.email"></el-input>
    </el-form-item>
    <el-form-item label="联系人电话" label-width="100px" prop="mobile">
      <el-input v-model="customerForm.mobile"></el-input>
    </el-form-item>
    <el-form-item label-width="0px" style="text-align: center">
      <el-button type="primary" @click="saveCustomer">{{customerForm.customerId?'保存修改':'确认添加'}}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {checkEmail} from "@/libs/util";
import {saveCustomer} from "@/api/customer";

export default {
  name: "edit",
  props:{
    customerForm: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      customerFormRules: {
        name: [
          {required: true, message: '请输入联系人', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入联系人邮箱', trigger: 'blur'},
          {validator: checkEmail, trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    saveCustomer() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          saveCustomer(this.customerForm).then(res => {
            if(res.code == 200) {
              if(this.customerForm.customerId) {
                this.$message.success('联系人资料修改成功')
              }else {
                this.$message.success('新的联系人创建成功')
              }
              this.$emit('saveCustomer',res.data)
            }
          })
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
